<template>
  <view class="cartsIcon">
    <image :src="staticUrl() + '/home/cartsIcon.png'" @click="clickCarts" />
    <text v-if="cartsNum">{{ cartsNum }}</text>
  </view>
</template>

<script>
import { getCartNum } from '@/api/carts/index.js'

export default {
  data () {
    return {
      cartsNum: ''
    }
  },
  mounted () {
    getCartNum().then(res => {
      if (res.code === 200) {
        this.cartsNum = res.data
      }
    })
  },
  methods: {
    clickCarts () {
      uni.switchTab({ url: '/pages/shoppingCarts/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.cartsIcon {
  position: fixed;
  bottom: 150rpx;
  right: 38rpx;

  image {
    width: 93.06rpx;
    height: 93.06rpx;
  }

  text {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background: #ef231b;
    padding: 0 8rpx;
    font-size: 20rpx;
    border-radius: 50rpx;
  }
}
</style>
